<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="toDetail(item.id)">
                    <div class="itemimg">
                        <!-- <img :src="item.image" alt=""> -->
                        <img v-lazy="item.image" alt="">
                    </div>
                    <div class="iteminfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥ {{ item.price }}.00</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>
<script>
// import axios from 'axios'
import request from '@/utils/request.js'
export default {
    data() {
        return {
            list: [],
            pagination: 1,
            loading: false, // 上拉加载组件中是否处于加载中状态
            finished: false, //  上拉加载组件中是否已加载完成
            isLoading: false  // 下拉刷新组件中是否处于加载中状态
        }
    },
    // 生命周期 
    // created() {
    //     console.log('生命周期')
    //     // 请求数据
    //     request.get('/list', {
    //         params: {
    //             pagination: this.pagination,
    //             pageNum: 10
    //         }
    //     }).then(res => {
    //         console.log(res, 'res')
    //         if (res.data.code == 200) {
    //             this.list = res.data.data
    //         }
    //     })
    // },
    methods: {
        onLoad() {
            // 页面滚动到距离底部300的时候自动触发
            // 发现刚进页面默认也会触发一次
            this.loading = true // 展示loading
            request.get('/list', {
                params: {
                    pagination: this.pagination,
                    pageNum: 10
                }
            }).then(res => {
                console.log(res, 'res')
                if (res.data.code == 200) {
                    // this.list = res.data.data
                    // this.list = this.list.concat(res.data.data)
                    this.list = [...this.list, ...res.data.data]
                }
                this.loading = false // loading 关闭
                this.pagination++
                if (this.list.length >= res.data.total) {
                    this.finished = true
                }
            })
        },
        onRefresh() {
            this.isLoading = true
            setTimeout(() => {
                this.isLoading = false
            }, 1000)
        },
        toDetail(id) {
            // this.$router.push('/detail/' + id) // 字符串拼接
            this.$router.push(`/detail/${id}`) // 模板字符串
        }
    }
}
</script>
<style lang="scss" scoped>
ul {

    // 解决高度塌陷问题
    overflow: hidden;

    li {
        width: 49%;
        float: left;
        margin: 0.5%;

        .itemimg {
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .iteminfo {
            padding: 2px 8px;

            .price {
                color: red;
            }
        }
    }
}
</style>